<template>
  <div>
    <el-tabs type="border-card">
      <!-- 全部 -->
      <el-tab-pane label="全部">
        <div>
          <RightContainer>
            <!-- 头部功能 -->
            <template v-slot:operate-btn>
              <el-form :inline="true" :model="query" class="demo-form-inline" size="mini" ref="query" :rules="rules">
                <el-form-item label="实例名" prop="ModelExampleName">
                  <el-input v-model="query.ModelExampleName" placeholder="请输入实例名"></el-input>
                </el-form-item>
                <!-- <el-form-item label="名称" prop="name">
                  <el-input v-model="formInline.name" placeholder="请输入名称"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="监控项" prop="region">
                  <el-select v-model="formInline.region" placeholder="请选择监控项">
                    <el-option label="任何" value="any"></el-option>
                    <el-option label="服务器" value="host"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item>
                  <el-button type="primary" @click="searchList('query')" icon="el-icon-search">搜索</el-button>
                  <el-button @click="resetForm('query')" type="warning" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
              </el-form>
              <el-button class="mr10" type="primary" @click="showAdd()" size="mini">新增</el-button>
              <!-- <el-button
                class="mr10"
                type="primary"
                @click="handleExport"
                size="small"
                >模板文件导出</el-button
              > -->
              <el-button class="mr10" icon="el-icon-upload2" @click="handleImport" size="mini">导入主机</el-button>
            </template>

            <!-- 全部列表 -->
            <template v-slot:data>
              <el-table v-loading="loading" :data="allList" :header-cell-style="{ backhround: '#eee', height: '60px' }"
                height="calc(100vh - 360px)" style="cursor: pointer" @row-click="handleRowClick"
                :cell-style="setCellColor">
                <el-table-column label="实例名" align="center" prop="model_example_name" show-overflow-tooltip />
                <el-table-column label="ip" align="center" prop="model_example_ip" show-overflow-tooltip />
                <el-table-column v-for="item in tableFIelds" :key="item.modelFieldId" :label="item.comment" align="center"
                  :prop="item.newFieldName"></el-table-column>
                <el-table-column label="操作" align="center" prop="operate" fixed="right" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.stop="
                      delExample(scope.row.model_example_id)
                      " size="mini" type="danger">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total > 0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize"
                @pagination="getList()" />
            </template>
          </RightContainer>
        </div>
      </el-tab-pane>

      <!-- 已分配 -->
      <el-tab-pane label="已分配">
        <div>
          <RightContainer>
            <!-- 头部功能 -->
            <template v-slot:operate-btn>
              <el-form :inline="true" :model="query" class="demo-form-inline" size="mini" ref="query" :rules="rules">
                <el-form-item label="实例名" prop="ModelExampleName">
                  <el-input v-model="query.ModelExampleName" placeholder="请输入实例名"></el-input>
                </el-form-item>
                <!-- <el-form-item label="名称" prop="name">
                  <el-input v-model="query.name" placeholder="请输入名称"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="监控项" prop="region">
                  <el-select v-model="formInline.region" placeholder="请选择监控项">
                    <el-option label="任何" value="any"></el-option>
                    <el-option label="服务器" value="host"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item>
                  <el-button type="primary" @click="searchList('query')" icon="el-icon-search">搜索</el-button>
                  <el-button @click="resetForm('query')" type="warning" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
              </el-form>
            </template>

            <!-- 已分配列表 -->
            <template v-slot:data>
              <el-table v-loading="loading" :data="allocatedList" :header-cell-style="{ backhround: '#eee' }"
                height="calc(100vh - 317px)" style="cursor: pointer" @row-click="handleRowClick"
                :cell-style="setCellColor">
                <el-table-column label="实例名" align="center" prop="model_example_name" />
                <el-table-column label="ip" align="center" prop="model_example_ip" show-overflow-tooltip />
                <el-table-column v-for="item in tableFIelds" :key="item.modelFieldId" :label="item.comment" align="center"
                  :prop="item.newFieldName"></el-table-column>
                <el-table-column label="操作" align="center" prop="operate" fixed="right" width="80">
                  <template slot-scope="scope">
                    <el-button @click.native.stop="
                      delExample(scope.row.model_example_id)
                      " size="mini" type="danger">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total > 0" :total="allocatedList.length" :page.sync="query.pageNum"
                :limit.sync="query.pageSize" @pagination="getList()" />
            </template>
          </RightContainer>
        </div>
      </el-tab-pane>

      <!-- 未分配 -->
      <el-tab-pane label="未分配" class="no">
        <div class="right-container">
          <!--右边列表数据-->
          <div class="">
            <RightContainer>
              <!-- 功能区 -->
              <template v-slot:operate-btn>
                <el-form :inline="true" :model="query" class="demo-form-inline" size="mini" ref="query" :rules="rules">
                  <el-form-item label="实例名" prop="ModelExampleName">
                    <el-input v-model="query.ModelExampleName" placeholder="请输入实例名"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="名称" prop="name">
                    <el-input v-model="formInline.name" placeholder="请输入名称"></el-input>
                  </el-form-item> -->
                  <!-- <el-form-item label="监控项" prop="region">
                    <el-select v-model="formInline.region" placeholder="请选择监控项">
                      <el-option label="任何" value="any"></el-option>
                      <el-option label="服务器" value="host"></el-option>
                    </el-select>
                  </el-form-item> -->
                  <el-form-item>
                    <el-button type="primary" @click="searchList('query')" icon="el-icon-search">搜索</el-button>
                    <el-button @click="resetForm('query')" type="warning" icon="el-icon-refresh">重置</el-button>
                  </el-form-item>
                </el-form>
              </template>

              <!-- 未分配列表 -->
              <template v-slot:data>
                <el-table v-loading="loading" :data="unallocatedList" :header-cell-style="{ backhround: '#eee' }"
                  height="calc(100vh - 317px)" style="cursor: pointer" @row-click="handleRowClick"
                  :cell-style="setCellColor">
                  <!-- <el-table-column label="ID" align="center" prop="model_example_id" sortable>
                      <template slot-scope="scope">
                        <div style="color: #409eff;cursor: pointer;" @click="toHostDetail(scope.row.model_example_id)">
                          {{ scope.row.model_example_id }}
                        </div>
                      </template>
                    </el-table-column> -->
                  <el-table-column label="实例名" align="center" prop="model_example_name" />
                  <el-table-column label="ip" align="center" prop="model_example_ip" show-overflow-tooltip />
                  <el-table-column v-for="item in tableFIelds" :key="item.modelFieldId" :label="item.comment"
                    align="center" :prop="item.newFieldName"></el-table-column>
                  <el-table-column label="操作" align="center" prop="operate" fixed="right" width="80">
                    <template slot-scope="scope">
                      <el-button @click.native.stop="
                        delExample(scope.row.model_example_id)
                        " size="mini" type="danger">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="unallocatedList.length" :page.sync="query.pageNum"
                  :limit.sync="query.pageSize" @pagination="getList()" />
              </template>
            </RightContainer>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 新增 -->
    <el-dialog title="新增主机" :visible.sync="addDialogVisible" class="member-info-modal" width="50%">
      <!-- <el-tabs v-model="activeName"> -->
      <!-- 新增实例弹窗 -->
      <!-- <el-tab-pane label="新增实例" name="first"> -->

      <el-form class="addForm" ref="addForm" label-position="right" :model="addForm" :rules="rules" label-width="100px"
        size="mini">
        <el-form-item label="实例名" prop="model_example_name">
          <el-input v-model="addForm.model_example_name" placeholder="请输入实例名" />
        </el-form-item>
        <el-form-item label="IP" prop="model_example_ip">
          <el-input v-model="addForm.model_example_ip" placeholder="请输入ip" />
        </el-form-item>
        <el-form-item v-for="item in tableFIelds" :key="item.modelFieldId" :label="item.comment"
          :prop="item.newFieldName">
          <el-date-picker v-if="item.type == 'DATE'" v-model="addForm[item.newFieldName]" type="date"
            :placeholder="'请选择' + item.comment" value-format="yyyy-MM-dd">
          </el-date-picker>

          <el-date-picker v-else-if="item.type == 'DATETIME'" v-model="addForm[item.newFieldName]" type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss" :placeholder="'请选择' + item.comment">
          </el-date-picker>

          <el-input v-else v-model="addForm[item.newFieldName]" :placeholder="'请输入' + item.comment" />
        </el-form-item>
        <el-form-item label-width="calc(100% - 150px)">
          <el-button type="primary" @click="addExample('addForm')">确 定</el-button>
          <el-button @click="addDialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
      <!-- </el-tab-pane> -->

      <!-- 主机 -->
      <!-- <el-tab-pane label="主机" name="second">
          <el-form :model="hostForm" size="mini">
            <el-form-item label="主机名称" label-width="100px">
              <el-input v-model="hostForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" label-width="100px">
              <el-select v-model="hostForm.region" placeholder="请选择活动区域">
                <el-option label="群组一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="calc(100% - 150px)">
              <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
              <el-button @click="addDialogVisible = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane> -->

      <!-- 标记 -->
      <!-- <el-tab-pane label="标记" name="third">
          <el-form ref="markForm" :inline="true" :model="markForm" label-width="125px" size="mini">
            <div style="margin-bottom: 20px; margin-left: 125px">
              <el-radio v-model="radio" label="1" style="font-size: 16px">Item tags</el-radio>
              <el-radio v-model="radio" label="2" style="font-size: 16px">Inherited and item tags</el-radio>
            </div>
            <div v-for="(item, index) in markForm.dynamicItem" :key="index">
              <el-form-item label="名称" :prop="'dynamicItem.' + index + '.name'">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="值" :prop="'dynamicItem.' + index + '.key'">
                <el-input v-model="item.key"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button v-if="index + 1 == markForm.dynamicItem.length" @click="addItem" type="primary">增加</el-button>
                <el-button v-if="index !== 0" @click="deleteItem(item, index)" type="danger">删除</el-button>
              </el-form-item>
            </div>
            <div style="margin-left: calc(100% - 150px)">
              <el-button size="mini" type="primary" @click="onSubmit">确定</el-button>
              <el-button size="mini" @click="addDialogVisible = false">取 消</el-button>
            </div>
          </el-form>
        </el-tab-pane> -->
      <!-- </el-tabs> -->
    </el-dialog>

    <!-- 主机导入弹框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-form ref="importForm" :model="importForm" size="mini" :rules="rules" label-width="80px">
        <el-form-item label="实例名" prop="modelExampleName">
          <el-input v-model="importForm.modelExampleName" placeholder="请输入实例名"></el-input>
        </el-form-item>
      </el-form>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
        :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
        :on-change="handleFileChange" :auto-upload="false" :data="{
          modelId: id,
          modelExampleName: importForm.modelExampleName,
        }" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
            @click="handleExport">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm('importForm')">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

import CommonTree from "@/components/CommonTree";
import RightContainer from "@/components/RightContainer";
import {
  getHostExampleDetail_Api,
  getModelIdCategoryList_Api,
  addModelExample_Api,
  delModelExample_Api,
  exportTemplateFile_Api, //模板文件导出
} from "@/api/configuration/resource";
import { getModelSearch_Api } from "@/api/configuration/model";
let queryIp = (rule, value, callback) => {
  const ipv4Regex =
    /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?::[0-9]{1,5})?$/;
  if (!ipv4Regex.test(value)) {
    callback(new Error("ip格式错误"));
  } else {
    callback();
  }
};
export default {
  name: "Business_Topology",
  components: {
    CommonTree,
    RightContainer,
  },
  data() {

    return {
      //主机导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/configuration/excel/import",
      },
      //主机导入的实例名
      importForm: {
        modelExampleName: null,
      },
      //标记
      radio: "1",
      markForm: {
        dynamicItem: [
          {
            name: "",
            phone: "",
          },
        ],
      },
      //主机
      hostForm: {
        name: "",
        region: "",
      },

      activeName: "first",
      id: "1691271544447475713",
      addDialogVisible: false, //控制新增实例弹窗显示或隐藏
      //新建实例表单
      addForm: {
        model_example_name: "", //实例名
        special_example: 1,
        model_example_ip: "",//ip
      },
      query: {
        pageNum: 1,
        pageSize: 10,
        modelExampleName: "",
      },
      //列表字段数据
      tableFIelds: [],
      rightSearch: "", //右侧搜索框
      //未分配主机池
      treeData: [
        // {
        //   label: "主机池",
        //   children: [
        //     {
        //       label: "空闲机",
        //     },
        //     {
        //       label: "腾讯云-上海",
        //     },
        //     {
        //       label: "空闲机-北京",
        //     },
        //   ],
        // },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      allList: [], //全部数据
      allocatedList: [], //已经分配
      unallocatedList: [], //未分配
      total: 0,
      // host_Form: {
      //   //新增主机表单
      //   IntranetID: "", //内网IP
      //   cloud_region: "", //云区域
      //   module: "", //模块名
      //   colony: "", //集群名
      //   host: "", //主机名称
      // },
      dialogVisible: false,
      loading: false,
      // 表单校验
      rules: {
        IntranetID: [{ required: true, message: "必填项", trigger: "blur" }],
        cloud_region: [{ required: true, message: "必填项", trigger: "blur" }],
        module: [{ required: true, message: "必填项", trigger: "blur" }],
        colony: [{ required: true, message: "必填项", trigger: "blur" }],
        host: [{ required: true, message: "必填项", trigger: "blur" }],
        model_example_name: [
          { required: true, message: `请输入实例名`, trigger: "blur" },
        ],
        special_example: [
          { required: true, message: "请选择特殊模型", trigger: "blur" },
        ],
        modelExampleName: [
          { required: true, message: "请输入实例名", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        region: [{ required: true, message: "请选择监控项", trigger: "blur" }],
      },
    };
  },
  created() {
    // this.getMenuList();
    this.getTableFields(this.id);
    this.getList();
  },
  mounted() {
    // this.total = this.host_List.length;
  },
  methods: {
    setCellColor({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return "color:#1890ff;";
      }
    },
    //追加数据
    addItem() {
      this.markForm.dynamicItem.push({
        name: "",
        key: "",
      });
    },
    //删除
    deleteItem(item, index) {
      this.markForm.dynamicItem.splice(index, 1);
    },
    // async getMenuList() {
    //   let res = await getModelSearch_Api();
    //   let { code, data } = res;
    //   if (code == 200) {
    //     data.forEach((item) => {
    //       if (item.categoryName && item.categoryName === "主机管理") {
    //         const tempObj = {};
    //         tempObj.children = [];
    //         tempObj.label = item.categoryName; //分类名称

    //         item.cgModels.forEach((v) => {
    //           const tempObj2 = {};
    //           tempObj2.label = v.modelName; //模型名称

    //           tempObj.children.push(tempObj2);
    //         });
    //         this.treeData.push(tempObj);
    //       }
    //     });
    //   }
    //   // console.log(this.treeData);
    // },
    //获取列表信息
    async getList() {
      this.allocatedList = [];
      this.unallocatedList = [];
      let res = await getHostExampleDetail_Api(this.query);
      let { code, rows, total } = res;
      if (code == 200) {
        this.total = total;
        this.allList = rows;
        rows.forEach((item) => {
          if (item.service_id && item.service_id !== "") {
            this.allocatedList.push(item);
          } else {
            this.unallocatedList.push(item);
          }
        });
      }
      this.loading = false;
    },
    //获取列表字段信息
    getTableFields(id) {
      this.loading = true; //开启列表loading
      //查询字段
      getModelIdCategoryList_Api({ modelId: id }).then((res) => {
        if (res.data.length) {
          //列表字段生成
          res.data.forEach((item) => {
            this.tableFIelds = [...this.tableFIelds, ...item.cgModelFields];
          });
          // this.tableFIelds = res.data[0].cgModelFields;
          // 表单验证生成
          this.tableFIelds.forEach((element) => {
            if (element.testingRegulationsJSON) {
              let arr = []
              JSON.parse(element.testingRegulationsJSON).forEach(item => {
                let obj = {}
                switch (item.type) {
                  case "max":
                    obj.max = Number(item.val)
                    obj.trigger = item.trigger
                    obj.message = item.message
                    break;
                  case "min":
                    obj.min = Number(item.val)
                    obj.trigger = item.trigger
                    obj.message = item.message
                    break;
                  case "number":
                    obj.type = item.type
                    obj.trigger = item.trigger
                    obj.message = item.message
                    break;
                  case "string":
                    obj.type = item.type
                    obj.trigger = item.trigger
                    obj.message = item.message
                    break;
                  case "ip":
                    obj.validator = queryIp
                    obj.trigger = item.trigger
                    break;
                  case "email":
                    obj.type = item.type
                    obj.trigger = item.trigger
                    obj.message = item.message
                    break;
                  case "required":
                    obj.required = true
                    obj.trigger = item.trigger
                    obj.message = item.message
                    break;
                  default:
                    break;
                }
                arr.push(obj)
              })
              this.rules[element.newFieldName] = arr
            }
          });
        } else this.loading = false; //关闭列表loading
      });
    },
    showAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        model_example_name: "", //实例名
        special_example: 1,
        model_example_ip: ""
      };
    },
    //新建实例
    addExample(formName) {
      //验证表单是否输入正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //正确
          this.addForm.modelId = this.id;

          // const newObj = {};
          // Object.keys(this.addForm).forEach((key) => {
          //   const newKey = key
          //     .replace(/([a-z])([A-Z])/g, "$1_$2")
          //     .toLowerCase(); // 将驼峰式转换为下划线间隔
          //   newObj[newKey] = this.addForm[key]; // 将原始值复制到更新后的键名
          // });

          addModelExample_Api(this.addForm)
            .then((res) => {
              this.getList(); //重新获取数据
              this.dialogVisible = false; //隐藏添加模版弹框
              this.$message.success("添加成功");
              this.addDialogVisible = false;
              this.addForm = clearObj(this.addForm); //清空表单
            })
            .catch((error) => { });
        } else {
          return false;
        }
      });
    },
    //删除实例
    delExample(id) {
      this.$confirm("此操作将永久删除该实例, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await delModelExample_Api(id);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击树形节点
    handleNodeClick(data) {
      // console.log(data);
    },
    /** 下载模板操作 */
    handleExport() {
      //下载方法
      exportTemplateFile_Api(this.id).then((res) => {
        const link = document.createElement("a"); //创建a标签
        try {
          // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});    //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
          let blob = res; //如果后台返回的直接是blob对象类型，直接获取数据
          // let _fileName = res.headers["content-disposition"]
          //   .split(";")[1]
          //   .split("=")[1]; //拆解获取文件名，如果后端有给返回文件名的话
          let _fileName = "model_excel";
          link.style.display = "none"; //隐藏

          //  方式一：
          // 兼容不同浏览器的URL对象
          const url = window.URL || window.webkitURL || window.moxURL;
          link.href = url.createObjectURL(blob);
          link.download = _fileName; //下载的文件名称
          link.click(); //触发click
          window.URL.revokeObjectURL(url); //  URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.

          // 方法二：
          // 兼容不同浏览器的URL对象
          // const url = window.URL || window.webkitURL || window.moxURL;
          // link.href=url.createObjectURL(blob);
          // link.setAttribute('download'_fileName.substring(_fileName.lastIndexOf('_')+1)));
          //   document.body.appendChild(link);
          //   link.click();
          //   document.body.removeChild(link);
          //   url.revokeObjectURL(link.href);//移除url对象
        } catch (e) {
          console.log("下载的文件出错", e);
        }
      });
    },
    //导入主机
    handleImport() {
      this.upload.title = "主机导入";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.importForm.modelExampleName = null;
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    //文件上传之前
    handleFileChange(file, fileList) {
      const FILE_NAME = file.name;
      if (
        FILE_NAME.substring(FILE_NAME.lastIndexOf(".")) !== ".xls" &&
        FILE_NAME.substring(FILE_NAME.lastIndexOf(".")) !== ".xlsx"
      ) {
        this.$message.warning("仅支持.xls和.xlsx文件");
        this.$refs.upload.clearFiles();
        return false;
      }
      // const isLt1M = file.size / 1024 / 1024 < 10;
      // if (isLt1M) {
      //   this.file = file;
      //   return true;
      // }
      // this.$message.warning("请上传不超过10M的文件.");
      // return false;
    },
    // 提交上传文件
    submitFileForm(formName) {
      //验证表单是否输入正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$refs.upload.submit();
        } else {
          return false;
        }
      });
    },
    handleRowClick(row, column, event) {
      // 处理行点击事件
      this.toHostDetail(row.model_example_id, row.model_id);
    },
    //跳转主机详情页面
    toHostDetail(id) {
      this.$router.push({
        path: "/configuration/resource/hostDetail?id=" + id,
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    //查询
    searchList(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getList(this.query);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-table__body-wrapper {
//   height: calc(100% - 67px) !important;
// }

::v-deep #pane-0 .el-table__fixed-body-wrapper {
  top: 60px !important;
}

.tip {
  color: rgba(51, 51, 51, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial-regular;
  margin-bottom: 20px;
}

.company-name {
  font-family: Arial;
  font-weight: 700;
  font-size: 16px;
  color: rgb(51, 51, 51);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 18px;
  text-decoration: none;
  text-align: center;
  margin-bottom: 10px;
}

.qrcode {
  height: 153px;
  text-align: center;
}

.qrcode img {
  width: 150px;
  height: 150px;
}

.download {
  width: 100%;
  text-align: center;
}

.download-btn {
  font-size: 14px;
  font-family: Arial-regular;
}

.right-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  overflow: hidden;

  .fr {
    .iconfont {
      font-size: 1em;
      margin-left: 8px;
    }
  }
}

.avatar-wrap {
  width: 127px;
  height: 137px;
  border: 1px solid #eee;
  border-radius: 50%;
  // border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.avatar {
  width: 125px;
  height: 135px;
}

.avatar-uploader-icon {
  font-size: 58px;
  color: #ddd;
}

.img-wrap {
  height: 340px;
  overflow: auto;

  ::v-deep .el-radio__input {
    position: absolute;
    right: 0;
  }
}

.img-li {
  width: 115px;
  height: 160px;
}

.mb15 {
  text-align: left;
}

.member-info-modal {
  ::v-deep .el-dialog__body {
    padding: 20px;
  }

  .modal-top {
    display: flex;
    align-items: center;
  }

  .modal-bottom {
    ::v-deep .el-form-item__content {
      width: calc(100% - 80px);
      position: relative;

      .el-cascader,
      .el-date-editor {
        width: 100%;
      }
    }

    .type-title {
      border-left: 2px solid #2d8ff4;
      padding-left: 12px;
      margin-left: 8px;
      margin-bottom: 14px;
      color: #333;
      height: 20px;
      line-height: 20px;
    }
  }
}

.staff-info {
  text-align: left;
  display: flex;

  img {
    width: 35px;
    height: 35px;
    border-radius: 5px;
  }

  .staff-name {
    margin-left: 5px;

    >div {
      width: 80px;
      padding-left: 5px;
    }
  }
}

.staff-top-search {
  background-color: #fff;
  padding: 5px;
}

.staff-body {
  // margin-top: 10px;
  flex: 1;
  height: calc(100% - 10px);
  overflow: hidden;

  .head-container {
    width: 200px;
    padding: 10px;
    border-radius: 5px;
    overflow-y: scroll;
    overflow-x: hidden;

    .el-input {
      box-sizing: border-box;
      width: 90%;
      margin-left: 5%;
    }
  }
}

.left-tree {
  width: 250px;
  padding: 10px;
  background-color: #fff;
}

.staff-container-right {
  width: calc(100% - 260px);
  margin-left: 10px;
  border-radius: 5px;
  overflow: hidden;

  .dk-corp-tip-text {
    .el-link--primary {
      color: #66b1ff;
      vertical-align: inherit;
      line-height: 18px;
    }

    .el-link.el-link--primary.is-underline:hover:after {
      border-bottom: 1px solid #66b1ff;
    }
  }
}

.staff-container-right-top {
  padding-bottom: 10px;
}

.new-form-item {
  padding: 0;
  margin-right: 5px !important;
  margin-top: 0px !important;
}

.pd15 {
  padding: 15px;
}

::v-deep .el-table .el-table__header-wrapper th {
  background: #eee;
}

.sync-user-btn {
  margin-left: 10px;
}

::v-deep .el-textarea .el-textarea__inner {
  padding-right: 45px;
}

.divider {
  margin: 0 10px;
  border: 1px solid #bbbbbb;
  height: 18px;
  display: inline-block;
  margin-bottom: -4px;
}

.drawer-div,
.extra-drawer-div {
  ::v-deep .el-drawer__container {
    .el-drawer {
      width: 780px !important;

      .el-drawer__header {
        >span {
          font-size: 20px;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }

  ::v-deep .el-drawer__header {
    margin-bottom: 15px;
  }

  ::v-deep .el-drawer__body {
    padding: 0 20px;
    height: calc(100% - 43px);
  }
}

::v-deep .el-tabs .el-tabs__header {
  background-color: #ffffff;
  border-radius: 5px 5px 0px 0px;
  box-sizing: border-box;
}

.addForm {
  max-height: 400px;
  overflow-y: scroll;
}
</style>
